<!-- 通讯录 -->
<template>
  <scroll-view
    :scroll-y="true"
    class="h-100p w-100p"
    refresher-enabled="true"
    :refresher-triggered="triggered"
    :refresher-threshold="50"
    refresher-background="#F5F5F5"
    @refresherrefresh="onRefresh"
    @refresherpulling="onPulling"
    @refresherrestore="onRestore"
    @refresherabort="onAbort"
    @scrolltolower="onScrollToLower"
  >
    <view class="container-body">
      <template v-if="list && list.length">
        <view class="u-p-l-30 u-p-r-30">
          <view class="my-card" v-for="(item, index) in list" :key="index" @click="detail(item)">
            <text class="my-card-title">{{ item.customerName }}</text>
            <text class="my-card-section f-12">{{ item.peopleTotal }} 人</text>
            <u-icon class="my-card-icon" name="arrow-right" color="#288CFE" size="28"></u-icon>
          </view>
        </view>
      </template>
      <template v-if="showEmpty">
        <view class="c-empty p-absolute-center">
          <u-empty text="抱歉，暂无相关数据~" :src="require('@/static/image/empty.png')"></u-empty>
        </view>
      </template>
      <view v-else class="p-t-10 u-p-b-40">
        <u-loadmore :status="status" />
      </view>
    </view>
  </scroll-view>
</template>

<script>
import { BASE_IP, BASE_URL } from '@/utils/ip.js'
export default {
  name: 'index',
  props: {
    search: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      searchData: {
        pageSize: 20,
        pageNumber: 1,
        countyNo: '',
        mineCode: '',
        countyStr: '所有区县',
        customerStr: '所有煤矿',
        customerName: ''
      },
      phoneSrc: require('@/static/image/tel.png'),
      coalMineName: '',
      triggered: false, // 下拉刷新
      showEmpty: false,
      status: 'loading',
      list: [],
      BASE_IP: '',
      BASE_URL: '',
      searchSrc: require('@/static/image/search.png'),
      countyShow: false,
      mineShow: false,
      countyList: [],
      mineList: [],
      isCity: true
    }
  },
  mounted() {
    this.BASE_URL = BASE_URL
    this.BASE_IP = BASE_IP
  },
  methods: {
    /**
     * 初始化
     */
    init() {
      this.searchData.pageNumber = 1
      this.status = 'loading'
      this.showEmpty = false
    },
    /**
     * 请求数据
     */
    async getData() {
      const res = await this.$post('/contacts/dataList', this.searchData)
      if (res && res.body.content) {
        this.list = this.searchData.pageNumber === 1 ? res.body.content : this.list.concat(res.body.content)
        // 到底了
        if (res.body.content.length < this.searchData.pageSize) {
          this.status = 'nomore'
        }
        // 数据空
        if (this.searchData.pageNumber === 1 && this.list && this.list.length === 0) {
          this.showEmpty = true
        } else {
          this.showEmpty = false
        }
      }
    },
    /**
     * 上拉加载
     */
    onScrollToLower() {
      if (this.status === 'loading') {
        this.searchData.pageNumber++
        this.getData()
      }
    },
    onPulling(e) {},
    onRefresh() {
      if (this.Isfreshing) return
      this.Isfreshing = true
      if (!this.triggered) {
        // 保证刷新状态下，triggered为true
        this.triggered = true
        this.init()
        this.getData()
        setTimeout(() => {
          this.triggered = false // 触发onRestore，关闭刷新图标
          this.Isfreshing = false
        }, 1200)
      }
    },
    onRestore() {},
    onAbort() {},
    // 详情
    detail(item) {
      uni.navigateTo({
        url: '/pages/addressList/company/list?code=' + item.customerId + '&name=' + item.customerName
      })
    }
  },
  watch: {
    search: {
      immediate: true,
      deep: true,
      handler(val) {
        this.searchData = {
          ...this.searchData,
          ...val,
          countyCode: val.countyNo,
          customerCode: val.customerNo,
          warningType: val.alarmType,
          pageNumber: 1
        }
        this.init()
        this.getData()
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.my-card {
  background: #fff;
  border: 1px solid rgb(255, 255, 255);
  box-shadow: 0px 1px 40rpx rgba(184, 184, 184, 0.2);
  border-radius: 8rpx;
  position: relative;
  margin-bottom: 20rpx;
  height: 100rpx;
  display: flex;
  align-items: center;
  &-title {
    position: absolute;
    left: 30rpx;
    color: #595959;
  }
  &-section {
    position: absolute;
    right: 90rpx;
    color: #288cfe;
  }
  &-icon {
    position: absolute;
    right: 30rpx;
    background: #f3f8ff;
    border-radius: 50%;
    padding: 10rpx;
  }
}
</style>
